<template>
  <div style="padding:0 20px 20px 20px">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="自动计算">
          <a-form layout="inline">
            <a-form-item label="计算轮次">
              <a-select
                v-model="calculationRound"
                style="width: 200px"
                placeholder="请选择计算轮次"
              >
                <a-select-option
                  v-for="item in roundOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="学年学期">
              <a-select
                v-model="calculationSemester"
                style="width: 200px"
                placeholder="请选择学年学期"
              >
                <a-select-option
                  v-for="item in semesterOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                :loading="calculating"
                @click="handleCalculate"
              >
                开始计算
              </a-button>
            </a-form-item>
          </a-form>
          <a-divider />
          <a-alert
            v-if="calculationResult"
            message="计算完成"
            description="已成功计算教学工作量，请查看计算结果。"
            type="success"
            show-icon
            style="margin-bottom: 16px"
          />
          <a-table
            :columns="calculationColumns"
            :data-source="calculationData"
            :pagination="false"
            bordered
          >
            <template slot="workload" slot-scope="text, record">
              <a-input-number
                v-if="record.editable"
                v-model="record.workload"
                :min="0"
                :step="0.1"
                style="width: 100%"
              />
              <span v-else>{{ text }}</span>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="saveWorkload(record.key)">保存</a>
                  <a-divider type="vertical" />
                  <a @click="cancelWorkload(record.key)">取消</a>
                </span>
                <span v-else>
                  <a @click="editWorkload(record.key)">编辑</a>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="手动录入">
          <a-form :form="form" layout="vertical">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="教师">
                  <a-select
                    v-decorator="[
                      'teacher',
                      { rules: [{ required: true, message: '请选择教师' }] },
                    ]"
                    placeholder="请选择教师"
                    show-search
                    option-filter-prop="children"
                  >
                    <a-select-option
                      v-for="teacher in teacherOptions"
                      :key="teacher.id"
                      :value="teacher.id"
                    >
                      {{ teacher.name }} ({{ teacher.department }})
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="课程">
                  <a-select
                    v-decorator="[
                      'course',
                      { rules: [{ required: true, message: '请选择课程' }] },
                    ]"
                    placeholder="请选择课程"
                    show-search
                    option-filter-prop="children"
                  >
                    <a-select-option
                      v-for="course in courseOptions"
                      :key="course.id"
                      :value="course.id"
                    >
                      {{ course.name }} ({{ course.code }})
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="标准课时">
                  <a-input-number
                    v-decorator="[
                      'hours',
                      { rules: [{ required: true, message: '请输入标准课时' }] },
                    ]"
                    style="width: 100%"
                    :min="0"
                    :step="1"
                    placeholder="请输入标准课时"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="学生人数">
                  <a-input-number
                    v-decorator="[
                      'studentCount',
                      { rules: [{ required: true, message: '请输入学生人数' }] },
                    ]"
                    style="width: 100%"
                    :min="0"
                    :step="1"
                    placeholder="请输入学生人数"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="教学手段">
                  <a-select
                    v-decorator="[
                      'method',
                      { rules: [{ required: true, message: '请选择教学手段' }] },
                    ]"
                    placeholder="请选择教学手段"
                  >
                    <a-select-option value="traditional">传统教学</a-select-option>
                    <a-select-option value="blended">混合式</a-select-option>
                    <a-select-option value="online">纯线上</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="是否重复授课">
                  <a-switch
                    v-decorator="['isRepeat', { valuePropName: 'checked' }]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item>
              <a-button type="primary" @click="handleAddWorkload">
                添加工作量
              </a-button>
            </a-form-item>
          </a-form>
          <a-table
            :columns="manualColumns"
            :data-source="manualData"
            :pagination="false"
            bordered
          >
            <template slot="operation" slot-scope="text, record">
              <a-popconfirm
                title="确定要删除这条记录吗?"
                @confirm="() => deleteWorkload(record.key)"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'workloadCalculation' })
  },
  data() {
    return {
      calculationRound: undefined,
      calculationSemester: undefined,
      calculating: false,
      calculationResult: false,
      roundOptions: [
        { value: 'round1', label: '第一轮计算' },
        { value: 'round2', label: '第二轮计算' },
        { value: 'round3', label: '第三轮计算' },
      ],
      semesterOptions: [
        { value: '2022-2023-1', label: '2022-2023学年第一学期' },
        { value: '2022-2023-2', label: '2022-2023学年第二学期' },
        { value: '2023-2024-1', label: '2023-2024学年第一学期' },
      ],
      calculationColumns: [
        {
          title: '教师',
          dataIndex: 'teacher',
          key: 'teacher',
        },
        {
          title: '课程',
          dataIndex: 'course',
          key: 'course',
        },
        {
          title: '标准课时',
          dataIndex: 'hours',
          key: 'hours',
        },
        {
          title: '计算工作量',
          dataIndex: 'workload',
          key: 'workload',
          scopedSlots: { customRender: 'workload' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      calculationData: [
        {
          key: '1',
          teacher: '李红梅 (信息工程系)',
          course: '数据结构 (CS101)',
          hours: 48,
          workload: 67.2,
          editable: false,
        },
        {
          key: '2',
          teacher: '李娜 (机电工程系)',
          course: '高等数学 (MATH201)',
          hours: 64,
          workload: 70.4,
          editable: false,
        },
        {
          key: '3',
          teacher: '王芳 (建筑工程系)',
          course: '大学物理 (PHY101)',
          hours: 48,
          workload: 48.0,
          editable: false,
        },
      ],
      cacheData: [],
      teacherOptions: [
        { id: '1', name: '李红梅', department: '信息工程系' },
        { id: '2', name: '李娜', department: '机电工程系' },
        { id: '3', name: '王芳', department: '建筑工程系' },
        { id: '4', name: '赵助教', department: '化学学院' },
      ],
      courseOptions: [
        { id: '1', name: '数据结构', code: 'CS101' },
        { id: '2', name: '自动化生产线安装与调试', code: 'MATH201' },
        { id: '3', name: '工业机器人技术应用', code: 'PHY101' },
        { id: '4', name: '液压与气动技术	', code: 'CHEM202' },
      ],
      manualColumns: [
        {
          title: '教师',
          dataIndex: 'teacher',
          key: 'teacher',
        },
        {
          title: '课程',
          dataIndex: 'course',
          key: 'course',
        },
        {
          title: '标准课时',
          dataIndex: 'hours',
          key: 'hours',
        },
        {
          title: '学生人数',
          dataIndex: 'studentCount',
          key: 'studentCount',
        },
        {
          title: '教学手段',
          dataIndex: 'method',
          key: 'method',
        },
        {
          title: '重复授课',
          dataIndex: 'isRepeat',
          key: 'isRepeat',
          customRender: (text) => (text ? '是' : '否'),
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      manualData: [],
    }
  },
  methods: {
    handleCalculate() {
      if (!this.calculationRound || !this.calculationSemester) {
        this.$message.warning('请选择计算轮次和学年学期')
        return
      }

      this.calculating = true
      setTimeout(() => {
        this.calculating = false
        this.calculationResult = true
        this.$message.success('工作量计算完成')
      }, 1500)
    },
    editWorkload(key) {
      this.cacheData = this.calculationData.map((item) => ({ ...item }))
      const target = this.calculationData.find((item) => item.key === key)
      if (target) {
        target.editable = true
      }
    },
    saveWorkload(key) {
      const target = this.calculationData.find((item) => item.key === key)
      if (target) {
        delete target.editable
        this.$message.success('工作量修改成功')
      }
    },
    cancelWorkload(key) {
      const target = this.calculationData.find((item) => item.key === key)
      if (target) {
        Object.assign(
          target,
          this.cacheData.find((item) => item.key === key)
        )
        delete target.editable
      }
    },
    handleAddWorkload() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const teacher = this.teacherOptions.find(
            (t) => t.id === values.teacher
          )
          const course = this.courseOptions.find((c) => c.id === values.course)

          this.manualData.push({
            key: Date.now().toString(),
            teacher: `${teacher.name} (${teacher.department})`,
            course: `${course.name} (${course.code})`,
            hours: values.hours,
            studentCount: values.studentCount,
            method: this.getMethodText(values.method),
            isRepeat: values.isRepeat,
          })

          this.form.resetFields()
          this.$message.success('工作量添加成功')
        }
      })
    },
    deleteWorkload(key) {
      this.manualData = this.manualData.filter((item) => item.key !== key)
      this.$message.success('工作量删除成功')
    },
    getMethodText(value) {
      const map = {
        traditional: '传统教学',
        blended: '混合式',
        online: '纯线上',
      }
      return map[value] || value
    },
  },
}
</script>

<style>
.editable-row-operations a {
  margin-right: 8px;
}
</style>